<template>
<div>
  <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in bannerList">
          <img class="banner" v-bind:src="item" alt="" />
        </div>
      </div>
      <div class="swiper-pagination pagination1"></div>
  </div>
  <form class="searchCompany" action="#" method="get">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="ImgTd"><img class="imgBtn" src="../assets/img/kf@2x.png" alt="" /></td>
        <td>
          <div class="searchInput" style="width:90%;margin:0px auto;">
            <input class="text" type="text" v-model="searchName" name="name" v-bind:placeholder="type==1?'请输入企业名':'请输入人名'"/>
            <img src="../assets/img/it@2x.png" alt="" class="ico" />
          </div>
        </td>
        <td class="ImgTd"><img class="imgBtn" src="../assets/img/xiaoxi@2x.png" alt="" /></td>
      </tr>
    </table>
  </form>
</div>
</template>

<script>
  var bannerList = [
    require("../assets/img/slider1.jpg"),
    require("../assets/img/slider2.jpg"),
    require("../assets/img/slider3.jpg"),
    require("../assets/img/slider4.jpg")
  ];
  import axios from 'axios'
  export default {
      name: 'voteTop',
      props:{
      type:{
        type:String,
        required:true
      }
    },
    data() {
        return {
          bannerList:bannerList,
          inputType:"",
          searchName:"",
          formLinkTo:"",
          searchData:"",
      	  formLinkId:""
        }
      },
      mounted() {
      this.init();
    },
    methods: {
       init(){
        var _this = this;
        if(_this.type == "1"){
          _this.inputType = "请输入正确的企业名";
          _this.formLinkTo = "CompanyVote"
        }else{
          _this.inputType = "请输入正确的人名";
          _this.formLinkTo = "AnalystInfo";
        }
        var swiper = new Swiper('.swiper1', {
          loop: true,
            autoplay: {
              delay: 3500
            },
            pagination: {
              el: '.pagination1',
              clickable: true,
              renderBullet: function (index, className) {
                return '<span class="' + className + '"></span>';
              },
            },
         });
         
         $(".searchCompany input.text").on("focus",function(){
          var obj = $(this);
          var oldValue = obj.val();
          var timeId = setInterval(function(){            
            var currenceValue = obj.val();
            if(currenceValue == oldValue && currenceValue != ''){
              _this.searchFormSubmit(_this.$store.state.domain,1);
              clearInterval(timeId);
              obj.blur();
              obj.val("");
            }else{
              oldValue = obj.val();
            }
          },800);
        });
       },
       searchFormSubmit(domain,page){
        var _this = this;
        var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i");   
        _this.openDialog();
          if(pat.test(_this.searchName)==true){
            $(".dialogContent").empty().append('<span style="color:red">'+_this.inputType+'</span>');
          return false;   
          }else{
            $(".dialogContent").empty().append('<div class="dropload-load"><span>正在为亲加载</span></div>');
            axios.get(domain + 'search_name/'+_this.searchName+'/' + _this.type +'/' + page).then(function(res) {
          	if(res.data.data.total>0){
          		setTimeout(function(){
		            _this.searchData = res.data.data;
	          		_this.closeDialog();
	                _this.$router.push({ name: _this.formLinkTo, params: { data: _this.searchData }});
	            },800);
          		
          	}else{
          		$(".dialogContent").empty().append('<span style="color:red">未搜索到结果</span>');
          	}
           /* console.log(res);
            
            _this.formLinkId = res.data.value;
            _this.$nextTick(()=>{ 
            setTimeout(function(){
              _this.closeDialog();
                _this.$router.push({ name: _this.formLinkTo, params: { id: _this.formLinkId }});
            },1000);
            
             });*/
          }).catch(function(error) {
            console.log(error);
          });
          }
      },
      openDialog(){
        $(".dialogMask").fadeIn();
          $(".divDialog").fadeIn();
      },
      closeDialog(){
        $(".dialogMask").fadeOut();
          $(".divDialog").fadeOut();
      }
    }
  }
</script>